import React, { forwardRef } from "react";
import { Modal, Form, Input, Spin, message } from '@bytedance/mona-ui';
import { getVerifyCode, loginApi } from "@Api/webServerApi"
import {saveUserJwt } from '../coupon/autoHome/autoCoupFunc'
function LoginDlyUser(props, ref) {
    const { visible, onCancel, onOk } = props;
    // const loginFrom: any = Form.useForm();
    const [loginInfoData, setLoginInfoData] = React.useState({ phone: '', code: '' })
    const [spinning, setSpinning] = React.useState(false)

    return <Modal
        title="登录后使用"
        visible={visible}
        onCancel={() => {
            onCancel()
        }}
        onOk={() => {
            // onOk()
            setSpinning(true)
            // console.log('登陆')
            loginApi(loginInfoData).then(data => {
                setSpinning(false)
                // console.log('data',data)
                if (!data.code) {
                    localStorage.setItem('dlyUserToken', data.token)
                    localStorage.setItem('dlyUserRefreshToken', data.refresh_token)
                    saveUserJwt(data.token)
                    onOk()
                } else {
                    setSpinning(false)
                    message.warning(data.message)
                }
            }).catch(err => {
                // console.log('err', err)
                setSpinning(false)
                message.warning(err.message)
            })
        }}
        size="small"
        okText='登录'
        width={400}
    // footer={null}
    // footer={null}
    // style={{ width: '100%' }}
    // contentStyle={{ padding: 0 }}
    // bodyStyle={{ padding: 0 }}
    // wrapClassName="login-dly-user"
    // ref={ref}
    >
        <Spin spinning={spinning}>
            <Form
            // form={loginFrom}
            // onFinish={onFinish} 
            >
                <Form.Item label="手机号" rules={[{ required: true, message: '手机号' }]}>
                    <Input value={loginInfoData.phone} maxLength={11} placeholder="请输入手机号" onChange={(e) => {
                        // 限制只输入手机号
                        setLoginInfoData({ ...loginInfoData, phone: e.target.value })
                        // const reg = /^1[3456789]\d{9}$/;

                        // if (reg.test(e.target.value)) {
                        //     setLoginInfoData({ ...loginInfoData, phone: e.target.value })
                        // }
                    }}></Input>
                </Form.Item>

                <Form.Item label="验证码" extra="我们需要验证你的手机号">
                    <Input.Verify isReady value={loginInfoData.code} maxLength={6} onChange={(e) => {
                        setLoginInfoData({ ...loginInfoData, code: e.target.value })
                    }} onGetVerifyCode={() => {
                        return new Promise((res, rej) => {
                            // rej('123456')
                            const reg = /^1[3456789]\d{9}$/;
                            if (reg.test(loginInfoData.phone)) {
                                getVerifyCode({ phone: loginInfoData.phone }).then(data => {
                                    // console.log('发送成功')
                                    if (!data.code) {
                                       
                                        res()
                                    } else {
                                        message.warning(data.message)
                                        rej(data.message)
                                    }
                                })
                            } else {
                                message.warning('请输入正确的手机号')
                                rej('请输入正确的手机号')
                            }
                        });
                    }} />
                </Form.Item>

            </Form>
        </Spin>
    </Modal>
}
export default forwardRef(LoginDlyUser);